<template>
	<view class="yz" :class="{'theme--Black':CurrentTheme.name==='DarkMode'}">
		<view class="hd flex flex-col ali-cen just-cent" @click="onUploadImg">
			<u-avatar :mode="mode" :size="160" :src="UserInfo.avatar" :text="text"></u-avatar>
			<view class="mt20 fo-gray">点击修改头像</view>
		</view>
		<view>
			<u-cell-group>
				<u-cell-item
					title="昵称"
					center
					:value="UserInfo.Nickname"
					index="index"
					@click="$pub.naviTo('/pages/other/Setting/myInfoSet/gapFill?type=Nickname')"
					:arrow="true"
				></u-cell-item>
				<!-- <pupop :isShow.sync='isShowNickname' @send='NicknameConfirm'></pupop> -->

				<u-cell-item title="性别" center :value="UserInfo.Sex" index="index" @click="isShowSexPicker = true" :arrow="true"></u-cell-item>
				<u-select :mode="'single-column'" v-model="isShowSexPicker" :list="SexList" @confirm="SexConfirm"></u-select>

				<u-cell-item title="出生日期" center :value="UserInfo.Birth" index="index" @click="isShowBirthPicker = true" :arrow="true"></u-cell-item>
				<u-calendar v-model="isShowBirthPicker" ref="calendar" @change="BirthConfirm" mode="date"></u-calendar>

				<u-cell-item title="地址" center :value="UserInfo.Region" index="index" @click="isShowRegionPicker = true" :arrow="true"></u-cell-item>
				<u-picker mode="region" v-model="isShowRegionPicker" @confirm="RegionConfirm" @columnchange="Regioncolumnchange"></u-picker>

				<u-cell-item
					title="简介"
					center
					:value="UserInfo.introduce"
					index="index"
					@click="$pub.naviTo('/pages/other/Setting/myInfoSet/gapFill?type=introduce')"
					:arrow="true"
				></u-cell-item>
				<!-- <pupop :isShow.sync='isShowIntroduce' @send='introduceConfirm'></pupop> -->
			</u-cell-group>
		</view>
	</view>
</template>

<script>
import { API$GetUserinfo, API$UpdUserinfo } from '../../../../common/API/home.js';
import { API$UploadImg, API$UploadImgSync } from '../../../../common/API/other.js';
export default {
	data() {
		return {
			mode: 'circle',
			text: '', // 优先级比src高
			size: '90',
			isShowNickname: false,
			isShowSexPicker: false,
			SexList: [{ value: '1', label: '男' }, { value: '2', label: '女' }],
			isShowBirthPicker: false,
			isShowRegionPicker: false,
			isShowIntroduce: false,
			UserInfo: {
				avatar:'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg',
				Nickname: '暂无',
				Sex: '暂无',
				SexId: '',
				Birth: '暂无',
				Region: '暂无',
				introduce: '暂无'
			}
		};
	},
	onReady() {
		this.GetUserInfo();
	},
	onLoad() {
		uni.$on('FreshGetUserInfo', ()=> {
			this.GetUserInfo();
		});
		// uview的图片截切组件API
		uni.$on('uAvatarCropper', path => {
			this.UserInfo.avatar = path;
			this.uploadImgs(this.UserInfo.avatar);
		});
	},
	onUnload() {
		uni.$off('FreshGetUserInfo')
		uni.$off('uAvatarCropper')
	},
	methods: {
		NicknameConfirm(e) {
			this.UpdUserInfo({ Nickname: e });
		},
		SexConfirm(e) {
			this.UserInfo.Sex = e[0].label;
			this.UserInfo.SexId = e[0].value;
			this.UpdUserInfo({ sex: this.UserInfo.Sex });
		},
		BirthConfirm(e) {
			this.UserInfo.Birth = e.result;
			this.UpdUserInfo({ birth: this.UserInfo.Birth });
		},
		RegionConfirm(e) {
			this.UserInfo.Region = e.province.label + '-' + e.city.label + '-' + e.area.label;
			this.UpdUserInfo({ Region: this.UserInfo.Region });
		},
		introduceConfirm(e) {
			return console.log(e);
			this.UpdUserInfo({ introduce: e });
			return console.log(e);
		},
		// 上传图片
		onUploadImg() {
			this.$u.route({
				url: '/uview-ui/components/u-avatar-cropper/u-avatar-cropper',
				params: {
					// 输出图片宽度，高等于宽，单位px
					destWidth: 300,
					// 裁剪框宽度，高等于宽，单位px
					rectWidth: 200,
					// 输出的图片类型，如果'png'类型发现裁剪的图片太大，改成"jpg"即可
					fileType: 'jpg'
				}
			});
		},
		/*********************************************数据处理部分**************************************************************/
		async GetUserInfo(json) {
			try {
				uni.showLoading({ mask: true,title:'加载中' });
				let res = await API$GetUserinfo(json);
				if (res.code == 200) {
					console.log(res);
					this.UserInfo.avatar = res.result.avatar ? res.result.avatar : 'http://pic2.sc.chinaz.com/Files/pic/pic9/202002/hpic2119_s.jpg';
					this.UserInfo.Nickname = res.result.Nickname ? res.result.Nickname : '暂未设置';
					this.UserInfo.Sex = res.result.sex ? res.result.sex : '暂未设置';
					this.UserInfo.Birth = res.result.birth ? res.result.birth : '暂未设置';
					this.UserInfo.Region = res.result.Region ? res.result.Region : '暂未设置';
					this.UserInfo.introduce = res.result.introduce ? res.result.introduce : '暂未设置';
				}
			} catch (e) {
				console.log(e);
			} finally {
				uni.hideLoading();
			}
		},
		async UpdUserInfo(json) {
			try {
				uni.showLoading({ mask: true,title:'保存中' });
				let {code,data,msg} =  await API$UpdUserinfo(json);
				setTimeout(() => {
					this.$pub.Toast(msg);
				}, 500);
			} catch (e) {
				console.log(e);
			} finally {
				uni.hideLoading();
			}
		},
		// 上传图片
		async uploadImgs(URL) {
			try{
				uni.showLoading({ mask:true, title: '图片上传中0%' });
				let { code, params } = await API$UploadImg(); // 获取签名
				if (code == 200) {
					let uploadUrl = params.uploadDir + '/' + this.$tool.create_token() + '.png';
					let uploadimgTask = uni.uploadFile({
						url: 'https://' + params.host,
						filePath: URL,
						name: 'file',
						formData: {
							key: uploadUrl,
							policy: params.policy,
							OSSAccessKeyId: params.OSSAccessKeyId,
							success_action_status: '200',
							Signature: params.signature
							// 'x-oss-security-token': that.$store.state.file.StsConfig.stsToken // 使用STS签名时必传。
						},
						success: async uploadFileRes => {
							console.log(uploadFileRes);
							// this.userInfo.avatar = uploadFileRes;
							if (uploadFileRes.statusCode == 200) {
								let {code,result: { imgUrl }} = await API$UploadImgSync({ uploadUrl });
								this.UpdUserInfo({ avatar: imgUrl });
								// that.userInfo.avatar = imgUrl;
							}
							//TODO  前端限制图片大小，后端也做限制图片大小
							// uni.showToast({
							// 	title: '图片过大',
							// 	icon: 'none',
							// 	duration: 4000
							// });
						},
						fail: error => {
							console.log(error);
						}
					});
					uploadimgTask.onProgressUpdate(function(res) {
						uni.showLoading({ mask:true, title: '图片上传中'+res.progress});
						console.log('上传进度' + res.progress);
					});
				}
			}catch(e){
				console.log(e)
			}finally{
				uni.hideLoading();
			}

		}
	}
};
</script>

<style lang="less" scoped>
.yz{
	height: calc(100vh - 50px);
	overflow: scroll;
}
.hd {
	height: 300rpx;
}
</style>
